<template>
  <div class="home-container">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#ffffff"
          class="el-menu-vertical"
          default-active="1"
          text-color="#1a202c"
          router
        >
        <div class="box">
          <img src="../../assets/1.jpg" alt="cw" style="width: 100%; height: 100%;" />
        </div>
        <el-menu-item index="/home/page1">
            <span>大数据统计界面</span>
          </el-menu-item>
          <el-menu-item index="/home/page2">
            <span>电影信息管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page3">
            <span>电影供应商管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page4">
            <span>电影座位保修管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page5">
            <span>电影环境投诉</span>
          </el-menu-item>
          <el-menu-item index="/home/page6">
            <span>个人信息界面</span>
          </el-menu-item>
          <el-menu-item index="/">
            <span>确认退出系统</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

     <!-- 主内容区 -->
  <el-main>
    <div class="bigbox">
      <router-view></router-view>
    </div>
  </el-main>
    </el-container>
  </div>


</template>

<script setup>

</script>

<style scoped>
.home-container {
  height: 100vh;
  background: linear-gradient(145deg, #0a0f1a 0%, #1a1a2e 100%); /* 影院暗夜蓝渐变[3,5](@ref) */
}

.el-menu-vertical {
  height: 100%;
  background: rgba(26, 26, 46, 0.98) !important; /* 深蓝主色调[3](@ref) */
  border-right: 1px solid rgba(255, 64, 64, 0.15); /* 荧幕红边框[4](@ref) */
}

.el-aside {
  background: linear-gradient(160deg, #001a33 30%, #e74c3c 100%); /* 深蓝到影院红渐变[3,4](@ref) */
  box-shadow: 4px 0 15px rgba(231, 76, 60, 0.2); /* 影院红阴影[4](@ref) */
}

.el-main {
  padding: 20px;
  background: rgba(40, 40, 60, 0.97); /* 影院暗场灰[5](@ref) */
}

.bigbox{
  background: transparent;
  box-shadow: 0 4px 30px rgba(231, 76, 60, 0.1); /* 影院红透明阴影[4](@ref) */
}

.box{
  background: linear-gradient(145deg, #e74c3c 0%, #001a33 100%); /* 影院红到深蓝渐变[3,4](@ref) */
  box-shadow: 0 4px 6px rgba(231, 76, 60, 0.3); /* 影院红阴影[4](@ref) */
}

/* 菜单项 */
.el-menu-item {
  margin: 8px 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.el-menu-item:hover {
  background: rgba(230, 126, 34, 0.1) !important; /* 活力橙透明背景[3,5](@ref) */
  transform: translateX(5px);
}

.el-menu-item.is-active {
  background: linear-gradient(90deg, #e67e22 0%, #d35400 100%) !important; /* 橙红渐变[3,4](@ref) */
  color: white !important;
  box-shadow: 0 4px 6px rgba(230, 126, 34, 0.3);
}

/* 文字样式 */
.el-menu-item span {
  color: #e6e6e6; /* 影院浅灰[5](@ref) */
  font-weight: 600;
  letter-spacing: 0.5px;
}

.el-menu-item.is-active span {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 影院化装饰元素 */
.el-menu-item::after {
  content: '🎬'; /* 电影符号 */
  position: absolute;
  right: 15px;
  opacity: 0;
  transition: opacity 0.3s;
}

.el-menu-item:hover::after {
  opacity: 0.8;
}

/* 新增影院特色元素 */
.el-menu-vertical::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, 
    rgba(255, 64, 64, 0.05) 0%, 
    rgba(52, 152, 219, 0.05) 50%, 
    rgba(26, 26, 46, 0.1) 100%); /* 影院光效渐变[4,5](@ref) */
  pointer-events: none;
}
</style>